<template>
  <div class="dashboard-container">
    <h1 style="text-align: center">订单管理</h1>

    <!-- 确认收款对话框 -->
    <el-dialog title="确认收款" :visible.sync="collectionController" width="30%" @close="closeCollection('ruleForm')">
      <el-form label-width="20%" ref="ruleForm">
        <p style="text-align: center; font-size: 16px;">确认是否收款</p>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="info" plain @click="collectionAllLive('ruleForm')">确 定</el-button>
        <el-button plain @click="closeCollection('ruleForm')">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 结算对话框 -->
    <el-dialog title="结算" :visible.sync="settlementLiveController" width="30%" @close="closeSettlement('ruleForm')">
      <el-form label-width="20%" ref="ruleForm">
        <p style="text-align: center; font-size: 16px;">确认是否结算</p>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="info" plain @click="settlementAllLive('ruleForm')">确 定</el-button>
        <el-button plain @click="closeSettlement('ruleForm')">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 查询条件 -->
    <div style="margin-bottom: 20px; display: flex; align-items: center;">
      <el-select v-model="state" clearable placeholder="订单状态" style="margin-left: 20%;width: 200px">
        <el-option
          v-for="item in liveOptions"
          :key="item.state"
          :label="item.state"
          :value="item.state"
        />
      </el-select>

      <el-select v-model="abrogateIdentity" clearable placeholder="作废状态" style="margin-left: 40px;width: 200px">
        <el-option
          v-for="item in abrogateIdentitys"
          :key="item.abrogateIdentity"
          :label="item.abrogateIdentity"
          :value="item.abrogateIdentity"
        />
      </el-select>

      <el-input
        v-model="liveId"
        placeholder="订单ID"
        name="roomNumber"
        type="text" clearable style="margin-left:40px ;width: 180px"
      />
      <el-button
        plain
        style="width:80px;margin-top:0;margin-left:40px ;background-color: pink; border-radius: 8px;"
        @click="selectAll"
      >
        查询
      </el-button>
      <el-button
        style="width:80px;margin-bottom:0;margin-left:40px ;background-color: white; border-radius: 8px;"
        @click="checkLive">重置</el-button>
    </div>

    <!-- 订单表格 -->
    <el-table :data="liveList" height="659px" border style="width: 100%;margin-top: 20px" class="elegant-room-table">
      <el-table-column align="center" fixed prop="liveId" label="订单ID" min-width="100"/>
      <el-table-column align="center" fixed prop="customerName" label="顾客名称" width="100"/>
      <el-table-column align="center" fixed prop="roomNumber" label="房间号" min-width="100"/>
      <el-table-column align="center" fixed prop="roomTypeName" label="房间类型" min-width="100"/>
      <el-table-column align="center" fixed prop="roomPrice" label="房间价格" width="100">
        <template v-slot="scope">
          <span class="price-tag">¥{{ scope.row.roomPrice }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed prop="liveTime" label="入住时间" width="110"/>
      <el-table-column align="center" fixed prop="cancelTime" label="退房时间" width="110"/>
      <el-table-column align="center" fixed prop="state" label="房间状态" min-width="110">
        <template v-slot="scope">
          <span :class="{
            'state-green': scope.row.state === '已退房',
            'state-red': scope.row.state === '入住中'
          }">
            {{ scope.row.state }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed prop="liveAmount" label="订单金额" min-width="110"/>
      <el-table-column align="center" fixed prop="collectionIdentity" label="收款标识" min-width="110">
        <template v-slot="scope">
          <span :class="{
            'collectionIdentity-green': scope.row.collectionIdentity === '已收款',
            'collectionIdentity-red': scope.row.collectionIdentity === '未收款'
          }">
            {{ scope.row.collectionIdentity }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed prop="remark" label="房间备注" min-width="130"/>
      <el-table-column align="center" fixed prop="abrogateIdentity" label="作废标识" width="120"/>
      <el-table-column align="center" fixed label="操作" width="120">
        <template v-slot="scope">
          <!-- 操作按钮逻辑 -->
          <el-button
            v-if="scope.row.state === '已退房' && scope.row.collectionIdentity === '未收款' && !scope.row.liveAmount"
            type="text"
            @click="settlementLiveButton(scope.row)"
          >结算</el-button>
          <el-button
            v-if="scope.row.status === '已退房' && scope.row.collectionIdentity === '未收款' && scope.row.liveAmount"
            type="text"
            @click="collectionLiveButton(scope.row)"
          >确认收款</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { selectAllLive, settlementLive1, collectionLive1 } from '@/api/live'

export default {
  name: 'OrderManagement',
  computed: {
    ...mapGetters([
      'userId',
      'userName',
      'roleName'
    ])
  },
  data() {
    return {
      state: '', // 订单状态筛选条件
      abrogateIdentity: '', // 作废状态筛选条件
      liveId: '', // 订单ID筛选条件
      liveList: [], // 订单列表数据
      liveOptions: [], // 订单状态选项
      abrogateIdentitys: [], // 作废状态选项
      collectionController: false, // 确认收款对话框控制
      collectionList: {
        collectionIdentity: '' // 收款标识
      },
      settlementLiveController: false, // 结算对话框控制
      settlementLiveList: {
        liveAmount: '', // 结算金额
        roomPrice: '' // 房间价格
      }
    }
  },
  mounted() {
    this.fetchData() // 加载初始数据
  },
  methods: {
    /**
     * 获取订单数据
     */
    fetchData() {
      this.selectAll()
      this.fetchLiveOptions()
      this.fetchAbrogateIdentityOptions()
    },

    /**
     * 查询所有订单
     */
    selectAll() {
      selectAllLive({
        state: this.state,
        abrogateIdentity: this.abrogateIdentity,
        liveId: this.liveId
      }).then(response => {
        console.log('订单数据:', response.data)
        this.liveList = response.data
      }).catch(error => {
        console.error('获取订单数据失败:', error)
      })
    },

    /**
     * 确认收款操作
     */
    collectionAllLive(formName) {
      collectionLive1({
        collectionIdentity: this.collectionList.collectionIdentity,
        liveTableId: this.collectionList.liveTableId
      }).then(response => {
        this.handleSuccess('确认收款')
        this.resetCollectionState()
        this.fetchData() // 刷新数据
      }).catch(error => {
        console.error('确认收款失败:', error)
        this.$message.error('确认收款失败')
      })
    },

    /**
     * 结算操作
     */
    settlementAllLive(formName) {
      settlementLive1({
        liveAmount: this.settlementLiveList.liveAmount,
        roomPrice: this.settlementLiveList.roomPrice,
        liveTableId: this.settlementLiveList.liveTableId
      }).then(response => {
        this.handleSuccess('结算')
        this.resetSettlementState()
        this.fetchData() // 刷新数据
      }).catch(error => {
        console.error('结算失败:', error)
        this.$message.error('结算失败')
      })
    },

    /**
     * 处理成功消息
     */
    handleSuccess(operation) {
      this.$message.success(`${operation}成功`)
    },

    /**
     * 重置收款状态
     */
    resetCollectionState() {
      this.collectionController = false
      this.collectionList.collectionIdentity = ''
    },

    /**
     * 重置结算状态
     */
    resetSettlementState() {
      this.settlementLiveController = false
      this.settlementLiveList.liveAmount = ''
      this.settlementLiveList.roomPrice = ''
    },

    /**
     * 获取订单状态选项
     */
    fetchLiveOptions() {
      selectAllLive().then(response => {
        this.liveOptions = Object.values(
          response.data.reduce((selectStatus, item) => {
            selectStatus[item.state] = item
            return selectStatus
          }, {})
        )
      }).catch(error => {
        console.error('获取订单状态选项失败:', error)
      })
    },

    /**
     * 获取作废状态选项
     */
    fetchAbrogateIdentityOptions() {
      selectAllLive().then(response => {
        this.abrogateIdentitys = Object.values(
          response.data.reduce((selectAbrogateIdentity, item) => {
            selectAbrogateIdentity[item.abrogateIdentity] = item
            return selectAbrogateIdentity
          }, {})
        )
      }).catch(error => {
        console.error('获取作废状态选项失败:', error)
      })
    },

    /**
     * 打开结算按钮操作
     */
    settlementLiveButton(row) {
      this.settlementLiveList = {
        liveAmount: row.roomPrice,
        liveTableId: row.liveTableId
      }
      this.settlementLiveController = true
    },

    /**
     * 打开收款按钮操作
     */
    collectionLiveButton(row) {
      this.collectionList = {
        collectionIdentity: '已收款',
        liveTableId: row.liveTableId
      }
      this.collectionController = true
    },

    /**
     * 重置查询条件
     */
    checkLive() {
      this.state = ''
      this.abrogateIdentity = ''
      this.liveId = ''
      this.fetchData() // 刷新数据
    },

    /**
     * 关闭收款对话框
     */
    closeCollection() {
      this.collectionController = false
    },

    /**
     * 关闭结算对话框
     */
    closeSettlement() {
      this.settlementLiveController = false
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.elegant-room-table {
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  overflow: hidden;

  &::before {
    display: none;
  }

  .price-tag {
    display: inline-block;
    padding: 3px 8px;
    color: #171717;
    border-radius: 12px;
    font-weight: 500;
  }
}

.status-green {
  color: green;
}

.status-red {
  color: red;
}
</style>
